<template>
  <div class="container">
    <div class="app-container">
      <el-row style="margin: 20px 0 0 20px;">
        <el-input v-model="pageParams.carNumber" size="mini" placeholder="请输入车牌号码" style="width: 200px; margin: 20px 0 0 20px;" />
        <el-input v-model="pageParams.personName" size="mini" placeholder="请输入车主姓名" style="width: 200px; margin: 20px 0 0 20px;" />
        <el-select v-model="pageParams.cardStatus" size="mini" placeholder="状态" style="width: 100px; margin: 20px 0 0 20px;">
          <el-option size="mini" label="可用" value="0" />
          <el-option size="mini" label="已过期" value="1" />
        </el-select>
        <el-button size="mini" type="primary" style="margin-left: 20px;" @click="search">查询</el-button>
        <el-button size="mini">添加月卡</el-button>
        <el-button size="mini">批量删除</el-button>
      </el-row>

      <el-table :data="list" style="width: 100%; margin-top: 20px;">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" type="index" label="序号" width="80" />
        <el-table-column align="center" prop="personName" label="车主名称" />
        <el-table-column align="center" prop="phoneNumber" label="联系方式" />
        <el-table-column align="center" prop="carNumber" label="车牌号码" />
        <el-table-column align="center" prop="carBrand" label="车辆品牌" />
        <el-table-column align="center" prop="totalEffectiveDate" label="剩余有效天数" />
        <el-table-column align="center" prop="cardStatus" label="状态">
          <template #default="{row}">
            <span v-if="row.cardStatus === 0">可用</span>
            <span v-if="row.cardStatus === 1">已过期</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template>
            <el-button type="text" size="mini">续费</el-button>
            <el-button type="text" size="mini">查看</el-button>
            <el-button type="text" size="mini">编辑</el-button>
            <el-button type="text" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageParams.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageParams.total"
        @current-change="changePage"
        @size-change="changePageSize"
      />
    </div>
  </div>
</template>
<script>
import { getMothlyCardListAPI } from '@/api'

export default {
  name: 'MonthlyCard',
  data() {
    return {
      pageParams: {
        cardStatus: '',
        carNumber: '',
        personName: '',
        page: 1,
        total: 0,
        pageSize: 10
      },
      list: []
    }
  },
  created() {
    this.getMonthlyCardList()
  },
  methods: {
    async getMonthlyCardList() {
      // 调用接口获取月卡列表数据
      const { total, rows } = await getMothlyCardListAPI(this.pageParams)
      this.list = rows
      this.total = total
    },
    changePageSize(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getMonthlyCardList()
    },
    search() {
      this.getMonthlyCardList()
    },
    changePage(newPage) {
      this.pageParams.page = newPage
      this.getMonthlyCardList()
    }
  }
}
</script>
